<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form
          inline
          :label-position="'left'"
          :model="searchParams"
          class="search-form-inline"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input
                  v-model="searchParams.orderNo"
                  placeholder="订单号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称">
                <el-input
                  v-model="searchParams.customerName"
                  placeholder="客户名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-select
                  v-model="searchParams.status"
                  placeholder="订单状态"
                  clearable
                >
                 <el-option v-for="item in salesOrderStatus" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="下单时间" >
              <Date-picker align="left"   v-model="searchParams" />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="交货时间" >
              <Date-picker align="left" startTimeKey="deliveryStartDateTime" endTimeKey="deliveryEndDateTime" v-model="searchParams" />
            </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
      <table-header @create="handleCreate" />
      <page-table
        :WP_MaxHeight="300"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column
          label="订单号"
          prop="orderNo"
          fixed
           width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="showDialog(scope.row)">{{
              scope.row.orderNo
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          prop="customerName"
          fixed
          width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="订单状态" prop="statusName"></el-table-column>
        <el-table-column
          label="订单金额（预计）" width="140"
          prop="orderAmount"
        ></el-table-column>
        <el-table-column
          label="订单金额（实际）"
          prop="orderActualAmount" width="140"
        ></el-table-column>
        <el-table-column
          label="下单时间"
          prop="orderCreateDate"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
            <span>{{ scope.row.orderCreateDate | FormatDate('yyyy-MM-dd') }}</span>
        </template>
        </el-table-column>
        <el-table-column
          label="交货时间"
          prop="deliveryDate"
          show-overflow-tooltip
        >
             <template slot-scope="scope">
            <span>{{ scope.row.deliveryDate | FormatDate('yyyy-MM-dd') }}</span>
        </template>
        </el-table-column>
        <el-table-column
          label="完成时间"
          prop="completionDate"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
            <span>{{ scope.row.completionDate | FormatDate('yyyy-MM-dd') }}</span>
        </template>
        </el-table-column>
        <el-table-column label="负责人" prop="chargePersonName"></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          show-overflow-tooltip
        ></el-table-column>
      </page-table>
    </div>
    <Detail-panel
      v-if="show"
      :show.sync="show"
      :data.sync="detailData"
    ></Detail-panel>
    <Create-panel
      v-if="createShow"
      :show.sync="createShow"
      :title="createTitle"
      @afterSave="initPageList"
    ></Create-panel>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import DatePicker from '@/components/DatePicker'
import TableHeader from './components/TableHeader'
import CreatePanel from './components/CreatePanel'
import DetailPanel from './components/DetailPanel'
import Mixins from './mixins'
export default {
  components: {
    SearchBar,
    DatePicker,
    PageTable,
    TableHeader,
    CreatePanel,
    DetailPanel
  },
  mixins: [Mixins],
  created () {
    this.salesOrderStatus = this.getSalesOrderStatus()
  },
  data () {
    return {
      id: 'order',
      show: false,
      createShow: false,
      detailData: {},
      salesOrderStatus: []
    }
  },
  methods: {
    handleCreate (text) {
      this.createShow = true
      this.createTitle = text
    },
    showDialog (row) {
      this.show = true
      this.detailData = { ...row }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
